<template>
  <el-card body-style="height:auto" class="box-card" style="height: auto;">
    <!--头部总数统计-->
    <div>
      <div class="head">
        <el-card class="head_card" shadow="hover">
          <div class="block" style="width: 50%;float: left">
            <el-avatar style="background-color: aliceblue" :size="100" :src="agentCircleUrl"></el-avatar>
          </div>
          <div style="width: 50%;float: left ;height: auto;margin-top: 2%">
            <div class="title"><h4>Agent's Total Number</h4></div>
            <div class="total"><h1 style="font-size: xxx-large;margin-top: 3%">{{ this.total.agentTotal }}</h1></div>
          </div>
        </el-card>
        <el-card class="head_card" shadow="hover" style="margin-left: 8%">
          <div class="block" style="width: 50%;float: left">
            <el-avatar style="background-color: aliceblue" :size="100" :src="AppCircleUrl"></el-avatar>
          </div>
          <div style="width: 50%;float: left ;height: auto;margin-top: 2%">
            <div class="title"><h4>APP's Total Number</h4></div>
            <div class="total"><h1 style="font-size: xxx-large;margin-top: 3%">{{ this.total.appTotal }}</h1></div>
          </div>
        </el-card>
        <el-card class="head_card" shadow="hover" style="margin-left: 10%">
          <div class="block" style="width: 50%;float: left">
            <el-avatar style="background-color: aliceblue" :size="100" :src="verbCircleUrl"></el-avatar>
          </div>
          <div style="width: 50%;float: left ;height: auto;margin-top: 2%">
            <div class="title"><h4>Verb's Total Number</h4></div>
            <div class="total"><h1 style="font-size: xxx-large;margin-top: 3%">{{ this.total.verbTotal }}</h1></div>
          </div>
        </el-card>
        <el-card class="head_card" shadow="hover" style="float: right;margin-right: 2%">
          <div class="block" style="width: 50%;float: left">
            <el-avatar style="background-color: aliceblue" :size="100" :src="activityCircleUrl"></el-avatar>
          </div>
          <div style="width: 50%;float: left ;height: auto;margin-top: 2%">
            <div class="title"><h4>Activity's Total Number</h4></div>
            <div class="total"><h1 style="font-size: xxx-large;margin-top: 3%">{{ this.total.activityTotal }}</h1></div>
          </div>
        </el-card>
      </div>
      <div style="height: 450px">
        <div style="float: left;width: 72%;height: 100%">
          <el-card shadow="hover" body-style="height: 100%;width: 100%" style="font-weight: bold;height: 100%">
            <div ref="myEchart1" style="height: 350px;width: 100%;margin-top: 3%"/>
          </el-card>
        </div>
        <div style="height: 100%;width: 18%;float: left;margin-left: 8%">
          <el-card style="float: top;height: 45% ;background-color: skyblue">
            <h3>{{this.date}}</h3>
            <h1 style="margin-top: 10%">欢迎使用</h1>
            <h1>行为分析系统</h1>
          </el-card>
          <el-card style="float: top;height: 45%;margin-top: 10%;background-color: lightcoral"></el-card>
        </div>
      </div>
      <!--头部各类型数据统计-->
      <div style="margin-top: 4%">
        <div class="head_item">
          <div class="head_item_title"><h2>Verb类型统计</h2></div>
          <el-card class="count-car" shadow="hover" style="font-weight: bold;">
            <div ref="myEchart2" style="height: 300px;width: 100%"/>
          </el-card>
        </div>
        <div class="head_item" style="margin-left: 11%">
          <div class="head_item_title"><h2>Activity类型统计</h2></div>
          <el-card class="count-car" shadow="hover" style="font-weight: bold;">
            <div ref="myEchart3" style="height: 300px;width: 100%"/>
          </el-card>
        </div>
      </div>

    </div>

  </el-card>
</template>
<script>
  import BehaviorTotal from "./cmps/BehaviorTotal";

  export default {

    mounted: function () {
      this.getTotal()
      this.initChart2()
      this.initChart1()
      this.initChart3()
      this.getNow()
    },
    name: 'CountIndex',
    data() {
      return {
        date:new Date(),
        time: null,
        agentCircleUrl: require('../../assets/向右漂浮宇航员.png'),
        AppCircleUrl: require('../../assets/航天飞机.png'),
        verbCircleUrl: require('../../assets/卫星.png'),
        activityCircleUrl: require('../../assets/宇宙飞船掠影.png'),
        account: {
          date: [],
          activeAccount: [],
          account: []
        },
        verbTypeCount: [],
        activityTypeCount: [],
        total: {
          verbTotal: 100,
          activityTotal: 200,
          agentTotal: 300,
          appTotal: 10
        }
      }
    },
    components: {
      BehaviorTotal
    },
    methods: {
      getTotal() {
        this.$axios.get("/statistics/total").then(successResponse => {
          this.total = successResponse.data
        }).catch(failResponse => {
        })
      },
      initChart1(typeTitle, typeData) {
        let app = this;
        let myChart = app.$echarts.init(this.$refs.myEchart1);
        this.$axios.get("/statistics/account/activeAccountCount").then(successResponse => {

          this.account.date = successResponse.data.accountTotal.date
          this.account.account = successResponse.data.accountTotal.total
          this.account.activeAccount = successResponse.data.activityTotal.total

          let option = {
            tooltip: {
              trigger: 'axis'
            },
            legend: {
              data: ['注册人数', '活跃用户数']
            },
            grid: {
              left: '3%',
              right: '4%',
              bottom: '3%',
              containLabel: true
            },
            xAxis: {
              type: 'category',
              data: this.account.date
            },
            yAxis: {
              type: 'value'
            },
            series: [
              {
                name: '活跃用户数',
                type: 'line',
                stack: '总量',
                data: this.account.activeAccount
              }, {
                name: '注册人数',
                type: 'line',
                stack: '总量',
                data: this.account.account
              }]

          };
          myChart.setOption(option);
        }).catch(failResponse => {
        })
      },
      initChart2(typeTitle, typeData) {
        let app = this;
        let myChart = app.$echarts.init(this.$refs.myEchart2);
        this.$axios.get("/statistics/verb/typeCount").then(successResponse => {
          this.verbTypeCount = successResponse.data
          let option = {
            tooltip: {
              trigger: 'item'
            },
            legend: {
              top: '5%',
              left: 'center'
            },
            series: [
              {
                name: '',
                type: 'pie',
                radius: ['40%', '70%'],
                avoidLabelOverlap: false,
                itemStyle: {
                  borderRadius: 10,
                  borderColor: '#fff',
                  borderWidth: 2
                },
                emphasis: {
                  label: {
                    show: true,
                    fontSize: '40',
                    fontWeight: 'bold'

                  }
                },
                labelLine: {
                  show: true
                },
                data: this.verbTypeCount
              }
            ]
          };
          myChart.setOption(option);
        }).catch(failResponse => {
        })
      },
      initChart3() {
        let app = this;
        let myChart = app.$echarts.init(this.$refs.myEchart3);
        this.$axios.get("/statistics/activity/typeCount").then(successResponse => {
          this.activityTypeCount = successResponse.data
          let option = {
            tooltip: {
              trigger: 'item'
            },
            legend: {
              top: '5%',
              left: 'center'
            },
            series: [
              {
                name: '',
                type: 'pie',
                radius: ['40%', '70%'],
                avoidLabelOverlap: false,
                itemStyle: {
                  borderRadius: 10,
                  borderColor: '#fff',
                  borderWidth: 2
                },
                label: {
                  show: false,
                  position: 'center'
                },
                emphasis: {
                  label: {
                    show: true,
                    fontSize: '40',
                    fontWeight: 'bold'
                  }
                },
                labelLine: {
                  show: false
                },
                data: this.activityTypeCount
              }
            ]
          };
          myChart.setOption(option);
        }).catch(failResponse => {
        })
      },
      getNow(){
        let that= this;
        this.timer = setInterval(function() {
          that.date = new Date().toLocaleString();
        });
      }
    },
    beforeDestroy: function() {
      if (this.timer) {
        clearInterval(this.timer);
      }
    }

  }


</script>
<style>
  .count-car {
    width: 100%;

  }

  .box-card {
    width: 100%;
    height: auto;
    background-color: aliceblue;
  }

  .head_item {
    width: 30%;
    float: left;
    height: auto;
  }

  .head_item_title {
    margin-bottom: 2%;

  }

  .head {
    height: 140px;
    margin-bottom: 3%;
    margin-top: 3%;
  }

  .head_card {
    width: 18%;
    height: 100%;
    float: left;
  }

  .title {

  }

</style>

